let arr = [
    { x: -64, s: .83, z: 1 },
    { x: 140, s: 1, z: 2 },
    { x: 338, s: .83, z: 1 },
    { x: 960, s: .83, z: 1 },
    { x: 960, s: .83, z: 1 },
    { x: 960, s: .83, z: 1 },
]

function render() {
    let swiperObjs = document.querySelectorAll('.swiper .swiper-slide')
    swiperObjs.forEach((item, i) => {
        item.style.transform = `translateX(${arr[i].x}px) scale(${arr[i].s})`
        item.style.zIndex = arr[i].z
    })
}
render()
function next() {
    var temp = arr.pop()
    arr.unshift(temp)
    console.log(arr);
    render()
}
document.querySelector('.swiper .swiper-next').onclick = next

function prev() {
    var temp = arr.shift()
    arr.push(temp)
    render()
}
document.querySelector('.swiper .swiper-prev').onclick = prev

document.querySelector('.swiper .swiper-wrapper').onclick = function (evt) {
    let e = evt || window.event
    let target = e.target || e.srcElement
    if (target.parentNode.style.transform.includes('64px')) {
        prev()
    }
    if (target.parentNode.style.transform.includes('338px')) {
        next()
    }
}




